<template>
  <!---搜索表单-->
    <div class="search-div">
        <el-form label-width="70px" size="small">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="学生学号">
                        <el-input v-model="queryDto.studentNumber" style="width: 100%"
                                  placeholder="请输入学生学号"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="课程名称">
                        <el-input v-model="queryDto.courseId" style="width: 100%"
                                  placeholder="请输入课程名称"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="代课老师">
                        <el-select v-model="queryDto.teacherId" style="width: 100%" placeholder="请选择或输入教师姓名"
                                   filterable>
                            <el-option v-for="item in teacherList" :key="item.id" :value="item.id"
                                       :label="item.name"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="学年">
                        <el-select v-model="queryDto.academicYear" style="width: 100%" placeholder="请选择学年"
                                   filterable>
                            <el-option v-for="(label,value) in academicYears" :key="label" :value="value"
                                       :label="label"/>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="学期">
                        <el-select v-model="queryDto.semester" style="width: 100%" placeholder="请选择学期"
                                   filterable>
                            <el-option v-for="(label,value) in semesterOptions" :key="label" :value="value"
                                       :label="label"/>
                        </el-select>
                    </el-form-item>
                </el-col>

            </el-row>
            <el-row style="display:flex">
                <el-button type="primary" size="small" @click="searchGrade"> 搜索</el-button>
                <el-button size="small" @click="resetData">重置</el-button>
                <el-button type="info" size="small" @click="statisticalAnalysis">统计分析</el-button>
            </el-row>
        </el-form>
    </div>

  <!---数据表格-->
    <el-table :data="list" style="width: 100%" border>
        <el-table-column type="index" label="序号" width="60px" align="center"/>
        <el-table-column prop="studentNumber" label="学号"/>
        <el-table-column prop="studentName" label="学生姓名"/>
        <el-table-column prop="courseName" label="课程名称"/>
        <el-table-column prop="teacherName" label="代课老师" width="100px"/>
        <el-table-column prop="totalScore" label="成绩"/>
        <el-table-column prop="academicYear" label="学年" #default="scope">
            {{ academicYears[scope.row.academicYear] }}
        </el-table-column>
        <el-table-column prop="semester" label="学期" #default="scope">
            <el-tag v-if="scope.row.semester" :type="scope.row.semester == 1?'danger':'success'">{{
                semesterOptions[scope.row.semester]
                }}
            </el-tag>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" min-width="100px"/>
        <el-table-column prop="updateTime" label="更新时间" min-width="100px"/>
    </el-table>
    <el-pagination v-model:current-page="pageParams.page" v-model:page-size="pageParams.limit"
                   :page-sizes="[5, 10, 20, 50, 100]" @size-change="fetchData" @current-change="fetchData"
                   layout="total, sizes, prev, pager, next" :total="total"/>
</template>

<!-- script部分修改内容 -->
<script setup>
import {onMounted, ref} from 'vue'
import {GetGradeListByPage} from '@/api/grade'
import {FindAllTeacher} from '@/api/teacher'
import router from "@/router";

const statisticalAnalysis = () => {
    router.push({name: 'statistical'});
}

const academicYears = {
    2024: "2024-2025",
    2023: "2023-2024",
    2022: "2022-2023",
    2021: "2021-2022",
    2020: "2020-2021",
    2019: "2019-2020"
};
const semesterOptions = {
    1: '秋季学期',
    2: '春季学期'
};
// 分页条总记录数
let total = ref(0)
// 定义表格数据模型
let list = ref([])
//分页数据
const pageParamsForm = {
    page: 1, // 页码
    limit: 10, // 每页记录数
}
const pageParams = ref(pageParamsForm) // 将pageParamsForm包装成支持响应式的对象
// 搜索表单数据
const queryDto = ref({
    studentNumber: '',
    studentId: '',
    teacherId: '',
    semester: '',
    isMakeupExam: ''
})
const teacherList = ref([])

// 页面加载完毕以后请求后端接口获取数据
onMounted(async () => {
    await fetchData()
    const {data} = await FindAllTeacher()
    teacherList.value = data
})

// 搜索按钮点击事件处理函数
const searchGrade = () => {
    fetchData()
}
// 重置按钮点击事件处理函数
const resetData = () => {
    queryDto.value = {}
    fetchData()
}
// 远程调用后端分页查询接口
const fetchData = async () => {
    const {data} = await GetGradeListByPage(
        pageParams.value.page,
        pageParams.value.limit,
        queryDto.value
    )
    list.value = data.list
    total.value = data.total
}
</script>

<style scoped>
.search-div {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ebeef5;
    border-radius: 3px;
    background-color: #fff;
}
</style>
